<template>
	<view class="service-provider-center">
		<NavBar :isBack="true" :isHeight="false" iconColor="#fff"></NavBar>
		<view class="content">
			<view class="header-area">
				<image class="bg-img" src="@/static/services/demo.png"></image>
				<view class="service-msg">
					<view class="title">{{ servercore.service_providers_users?.title }}</view>
					<view class="tag">
						<image src="@/static/services/star.png"></image>
						您身边的专业汽车服务专家
					</view>
				</view>
			</view>
			<view class="main-content">
				<view class="header">
					<image src="@/static/services/demo.png"></image>
					<view>
						<view class="title">{{ servercore.service_providers_users?.title }}服务</view>
						<view class="time">开始服务时间：{{ servercoreInfo.createtime }}</view>
						<view>{{ servercoreInfo.day }}天工作经验 {{ servercoreInfo.ordernum }} 单</view>
					</view>
				</view>
				<view class="footer">
					<view class="box" v-for="(item, index) in list" :key="index">
						<view class="title">{{ item.title }}</view>
						<view class="chunk">
							<view class="item" v-for="(item1, index1) in item.childList" :key="index1" @click="toUrl(item1)">
								<view class="left">
									<view>{{ item1.title }}</view>
									<image src="@/static/goodDetail/back.png"></image>
								</view>
								<image :src="item1.img" v-if="item.type == 1"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { servercore } from '@/api/services.js'
import {
	ref,
	reactive,
	onBeforeMount,
	onMounted,
	toRefs
} from 'vue'
const state = reactive({
	list: [{
		type: 1,
		title: "服务商管理",
		childList: [{
			type: 1,
			title: "信息管理",
			url: "/pages/services/informationManagement",
			img: "/static/services/msg1.png",
		},
		{
			type: 2,
			title: "订单管理",
			url: "/pages/services/orderManagement",
			img: "/static/services/msg2.png",
		}, {
			type: 3,
			title: "订单收益",
			url: "/pages/services/serverIncomeDetail",
			img: "/static/services/msg.png",
		}
		]
	},
	{
		type: 2,
		title: "服务点管理",
		childList: [{
			type: 1,
			title: "服务点列表",
			url: "/pages/services/servicePoint"
		},
		]
	},],
	servercoreInfo: {}
})
const navBarStyle = ref({
	top: "44rpx",
})

function goBack () {
	uni.navigateBack({
		delta: 1
	})
}
function toUrl ({ url }) {
	uni.navigateTo({
		url
	})
}
async function getServercoreList () {
	const res = await servercore()
	state.servercoreInfo = res.data
	console.log(res, 'res');
}

onMounted(() => {
	getServercoreList()
})
onBeforeMount(() => {
	uni.getSystemInfo({
		success: (res) => {
			const statusBarHeight = res.statusBarHeight || 0;
			// 计算导航栏高度
			const navBarHeight = statusBarHeight + 40;
			// 设置导航栏样式
			navBarStyle.value = {
				top: `${navBarHeight}rpx`,
			};
		}
	});
})
const { list, servercoreInfo } = toRefs(state)
</script>

<style lang="scss" scoped>
.service-provider-center {
	.content {
		.header-area {
			position: relative;
			width: 750rpx;
			height: 440rpx;

			.bg-img {
				width: 100%;
				height: 100%;
			}

			.back-img {
				position: absolute;
				left: 24rpx;
				width: 80rpx;
				height: 80rpx;
			}

			.service-msg {
				position: absolute;
				bottom: 166rpx;
				left: 55rpx;
				display: flex;
				align-items: flex-end;

				.title {
					font-weight: 800;
					font-size: 48rpx;
					color: #FFFFFF;
					margin-right: 30rpx;
				}

				.tag {
					display: flex;
					justify-content: center;
					align-items: center;
					// width: 295rpx;
					// height: 38rpx;
					padding: 2rpx 10rpx;
					line-height: 38rpx;
					text-align: center;
					background: rgba(0, 0, 0, 0.8);
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					font-weight: 500;
					font-size: 20rpx;
					color: #FFFFFF;

					image {
						width: 20rpx;
						height: 20rpx;
						margin-right: 6rpx;
					}
				}
			}
		}

		.main-content {
			padding: 0rpx 33rpx;
			position: relative;
			top: -45rpx;
			border-radius: 22rpx 22rpx 0rpx 0rpx;
			background: #F5F5F5;

			.header {
				width: 678rpx;
				height: 202rpx;
				background: #FFFFFF;
				border-radius: 22rpx 22rpx 22rpx 22rpx;
				font-weight: 500;
				font-size: 20rpx;
				color: #333333;
				display: flex;
				padding: 41rpx 31rpx;
				box-sizing: border-box;
				position: relative;
				top: -80rpx;

				image {
					width: 119rpx;
					height: 119rpx;
					border-radius: 50%;
					margin-right: 36rpx;
				}

				.title {
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
				}

				.time {
					margin: 8rpx 0rpx;
				}
			}

			.footer {
				margin-top: -40rpx;

				.box {
					margin-bottom: 40rpx;

					.title {
						font-weight: bold;
						font-size: 30rpx;
						color: #333333;
						margin-bottom: 26rpx;
					}

					.chunk {
						display: flex;
						justify-content: space-between;
						flex-wrap: wrap;

					}

					.item {
						display: flex;
						justify-content: space-between;
						align-items: center;
						width: 325rpx;
						height: 148rpx;
						background: #FFFFFF;
						border-radius: 22rpx 22rpx 22rpx 22rpx;
						padding-left: 30rpx;
						margin-bottom: 28rpx;
						box-sizing: border-box;

						.left {
							display: flex;
							align-items: center;
							font-weight: bold;
							font-size: 28rpx;
							color: #333333;

							image {
								width: 14rpx;
								height: 26rpx;
								margin-left: 17rpx;
								margin-top: 4rpx;
							}
						}

						image {
							width: 152rpx;
							height: 148rpx;
						}
					}
				}
			}
		}
	}
}
</style>